import React, { Component } from 'react'
import { connect } from "react-redux"
import Template from "components/UI/template"
import { Tabs } from 'antd'
import CompanyAccountSetting from './bank-account/company-account-setting'
import Condition from "components/condition"
import AliAccount from "./ali/ali-account"

const { Header, Middle } = Template;
const { TabPane } = Tabs;
const { If } = Condition;

@connect(mapStateToProps)
class CompanyAccount extends Component{

  state = {
    status: (this.props.currentPageRoute.subFunctions.find(item => item.operationType !== 'H') || {}).key
            || 'company-bankaccount-setting'
  };

  render () {
    const { status } = this.state;
    const { subFunctions } = this.props.currentPageRoute;
    return (
      <Template>
        <Header>
          <Tabs defaultActiveKey={status} onChange={key => this.setState({ status: key })}>
            {
              subFunctions.map(item => item.operationType !== 'H' &&
                <TabPane tab={item.resourceName} key={item.key}/>)
            }
          </Tabs>
        </Header>
        <Middle>
          <If value={status === 'company-bankaccount-setting'}>
            <CompanyAccountSetting disabled={(subFunctions.filter(item => item.key === 'company-bankaccount-setting')[0] || {}).operationType === 'R'}/>
          </If>
          <If value={status === 'company-alipayaccount-setting'}>
            <AliAccount disabled={(subFunctions.filter(item => item.key === 'company-alipayaccount-setting')[0] || {}).operationType === 'R'}/>
          </If>
        </Middle>
      </Template>
    )
  }

}

function mapStateToProps(state) {
  return {
    currentPageRoute: state.main.currentPageRoute
  }
}

export default CompanyAccount
